<template>
    <div class="cinema-screen">
        <div class="s-title">{{screenData.name}}</div>
        <div class="s-list">
            <div class="s-item box" :class="{choesn : item.id == key}" v-for="item in screenItem" :key="item.id" @click="active(item.id)">
                {{item.name}}
            </div>
        </div>
        
    </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
    props:{
        screenData:{Array,Object},
        keys:[String,Number],
        changes:{Boolean,String}
    },
    data(){
        return{
            screenItem:this.screenData.subItems,
            key:this.screenData.subItems[0].id,

            sId:this.$store.state.servicesId,
            hId:this.$store.state.hallTypesId,
        }
    },
    methods:{
        active(key){
            this.key=key
            // console.log(this.key)
            // console.log(this.changes)
            if(this.changes=='service'){
                this.sId=key
                this.service(this.sId)
            }
            if(this.changes=='hall'){
                if(key==-1){
                    this.hId='all'
                }else{
                    this.hId=key
                }
                
                this.hallType(this.hId)
            }
            
        },
        ...mapMutations(['service','hallType'])
    },
    computed:{
        ...mapState(['servicesId','hallTypesId'])
    }
}
</script>

<style lang="less" scoped>
.cinema-screen{
    margin: 12px 13px;
    .s-title{
        color: #333;
        font-size: 15px;
        line-height: 21px;
        margin-bottom: 13px;
    }
    .s-list{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 10px;
        .s-item{
            padding: 0 4px;
            width: 80px;
            height: 32px;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            background: #fff;
            font-size: 13px;
            color: #666;
            box-sizing: border-box;
            &::after{
                content: "";
                position: absolute;
                width: 200%;
                height: 200%;
                top: 0;
                left: 0;
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
                border: 1px solid #e5e5e5;
                -webkit-transform: scale(.5);
                transform: scale(.5);
                border-radius: 6px;
                box-sizing: border-box;
                pointer-events: none;
            }
        }
        .choesn{
            background: #fcf0f0;
            border: 1px solid #dd403b;
            border-radius: 3px;
            box-sizing: border-box;
            color: #dd403b;
        }
        .box{
            position: relative;
        }
    }
}
</style>